Replace YUI tooltips with Tippy.js #6408

janfaracik · 2022-03-27T20:14:22Z

This is the first of two PRs which intend to replace the existing YUI implementation of tooltips and menus with Tippy.js. This PR focuses solely on tooltips and brings native support for Tippy.js to Jenkins.

tippy.tooltips.mov

This brings several advantages:

Better experience for users, animations, better placement engine
Cleaner and better defined codebase
Tippy is far more flexible than YUI, so we can be more creative with our designs
Far easier to find support online
YUI 2 is also abandoned since 2011

This implementation intends to maintain 100% backwards compatibility with the existing implementation of tooltips, it also introduces a new way to host HTML content in tooltips which is used for the project status tooltip using html-tooltip=" ... "

This change is documented in the updated Jenkins Design Library plugin.

For plugin developers

For developers that are using Tippy.js as part of their plugin, they can now remove the dependency and instead rely on the Jenkins implementations (tooltip="hello world" or data-html-tooltip="hello world")

Proposed changelog entries

Update appearance and framework for tooltips

Proposed upgrade guidelines

N/A

Submitter checklist

(If applicable) Jira issue is well described
Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change) and are in the imperative mood. Examples
- Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
Appropriate autotests or explanation to why this change has no tests
New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadoc, as appropriate.
For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@mention

Maintainer checklist

Before the changes are marked as ready-for-merge:

There are at least 2 approvals for the pull request and no outstanding requests for change
Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
Changelog entries in the PR title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood
Proper changelog labels are set so that the changelog can be generated automatically
If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

war/src/main/webapp/scripts/prototype.js

NotMyFault

HTML doesn't seem to be handled properly here. I'm not sure if this is a special occasion, because the tooltip is provided as translation string in a .properties file, where   is not escaped at all:
Tooltips are shown twice on this maven project if it's still building
The history widget displays an empty tooltip if the job didn't complete yet to show the overall time it took:

This brings several advantages:

Also worth to note that YUI 3 is abandoned since 2014.

janfaracik · 2022-03-27T22:34:54Z

HTML doesn't seem to be handled properly here. I'm not sure if this is a special occasion, because the tooltip is provided as translation string in a .properties file, where   is not escaped at all:

Tooltips are shown twice on this maven project if it's still building

The history widget displays an empty tooltip if the job didn't complete yet to show the overall time it took:

This brings several advantages:

Also worth to note that YUI 3 is abandoned since 2014.

Great finds! They should all be fixed now :)

NotMyFault

This is a follow up to my previous comment regarding

HTML doesn't seem to be handled properly here. I'm not sure if this is a special occasion, because the tooltip is provided as translation string in a .properties file, where
is not escaped at all:

If no agent is available, tooltips are stacked for every attempt to trigger a build:

Though even if they're split into separate lines, it looks odd to have +1 message for every attempt, considering you don't enqueue several builds in that way, but that may be a different issue.

Pipeline steps' tooltips are no longer attached to the step

For reference, that overview is generated by the workflow-support-plugin.

- I'm not sure if this is intended, but the warnings-ng plugin overview in columns does now unfold into the column itself stretching it a lot, rather than floating around somewhere near the actual issue # it introduces.
Can be dismissed, the same behavior can be seen by other objects if they are in the last table column.

57e3a7e771072328ff86e4d8d93e9a52.mp4

But thanks so far for addressing the initial concerns 👏🏻 unfortunately a few tests are failing

daniel-beck · 2022-03-28T12:01:55Z

YUI 3 is also abandoned since 2014

Wait, why do we care? We're on 2.x 😎

daniel-beck · 2022-03-28T12:03:56Z

HTML doesn't seem to be handled properly here.

IMO we should consider making all tooltips plain text if we can get away with it. They've been a common source of XSS issues in the past. Of course, some minimal formatting ability may need to remain, like newlines.

CC @Wadeck

timja · 2022-03-28T12:10:02Z

YUI 3 is also abandoned since 2014

Wait, why do we care? We're on 2.x 😎

From 2011 by the looks of it not that I can find the source of the latest upgrade, 2.9.0 doesn't seem to be in the repo

timja · 2022-03-28T12:12:27Z

HTML doesn't seem to be handled properly here.

IMO we should consider making all tooltips plain text if we can get away with it. They've been a common source of XSS issues in the past. Of course, some minimal formatting ability may need to remain, like newlines.

CC @Wadeck

Looking at the code only   has been added by default.

You can opt-in to html processing with html-tooltip.

core/src/main/resources/lib/hudson/queue.jelly

timja · 2022-11-22T08:49:09Z

/label ready-for-merge

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

uhafner

Hmm, the tooltips on the dashboard now work correctly. But for the summary views it is broken now. New tooltips are not right at the corresponding element. And the existing tooltips lost their background. I need to check if this is due to changes to make my warnings plugin backward compatible with different core versions.

Bildschirmaufnahme.2022-11-22.um.10.48.32.mov

uhafner

I will merge jenkinsci/font-awesome-api-plugin#186 right now and release a new plugin version. Then the tooltips will look good with Popper as well.

The other problem with the tooltips shown somewhere off the element hopefully can be fixed by moving the tooltip to a different element.

As a feature request (not in this PR): it should be possible to define the Popper placement value as an attribute somehow.

stephan-senkbeil · 2022-11-30T08:18:36Z

With the latest weekly which includes this PR we are seeing very long loading times on our instance (~30 seconds for the main page).
I did a performance recording using the Chrome and Firefox dev tools and both show that calls to registerTooltips take a very long time. I am attaching a screenshot.

I am assuming that this is related to this PR but of course cannot be sure (especially because I am not a web/javascript developer myself).
Please let me know if there is anything I can provide or should do to support you in solving the issue (e.g. providing data, Jira issue).

uhafner · 2022-11-30T08:24:39Z

Please create an issue in Jira, so that we can track this.

andrewkm · 2022-12-04T17:44:06Z

We are experiencing the same issues with loading time.

NotMyFault · 2022-12-04T17:52:15Z

We are experiencing the same issues with loading time.

An improved has been submitted in #7464, which will be delivered in the next Tuesday's release and be backported into the next LTS release, 2.375.2

MarkEWaite · 2022-12-04T17:58:21Z

.. and be backported into the next LTS release, 2.375.2

Problem was only visible in weekly, not in LTS. I don't think that a backport will be needed

NotMyFault · 2022-12-04T18:00:15Z

.. and be backported into the next LTS release, 2.375.2

Problem was only visible in weekly, not in LTS. I don't think that a backport will be needed

I've been misguided by the Jira issue being labeled as LTS candidate. This PR is only present in 2.380, there's no need to backport that, indeed 👍🏻

basil · 2022-12-05T23:11:44Z

Caused ReadOnlyTest#testGlobalConfiguration to start timing out on CI builds in jenkinsci/bom#1611 (fixed by #7464).

basil · 2023-01-20T22:03:43Z

Good news: this fixed JENKINS-70369!

basil · 2023-01-20T22:24:12Z

war/src/main/less/modules/table.less

+
+        svg {
+          vertical-align: middle;
+          width: 0.8rem;
+          height: 0.8rem;
+        }


In particular, this is the hunk that fixes JENKINS-70369. Could possibly be backported to stable-2.375 if desired, but likely not worth the effort for such a minor issue.

daniel-beck · 2023-08-23T10:18:33Z

Caused JENKINS-71880.

(Also, FTR, caused the resolved JENKINS-70178).

daniel-beck · 2024-02-29T13:17:57Z

Caused JENKINS-72744

daniel-beck · 2024-11-21T18:57:57Z

test/src/test/java/jenkins/security/Security2779Test.java

        Object jsResult = innerHtmlScript.getJavaScriptResult();
        assertThat(jsResult, instanceOf(String.class));
        String jsResultString = (String) jsResult;

        // assert leading space to identify unintentional double-escaping (&amp;lt;) as test failure
        assertThat("tooltip does not contain dangerous HTML", jsResultString, not(containsString(" <img src=x")));
-        assertThat("tooltip contains safe text", jsResultString, containsString(" &lt;img src=x"));
+        assertThat("tooltip contains safe text", jsResultString, containsString("lt;img src=x"));


Caused JENKINS-73907 which the inclusion of & in the assertion explicitly existed to prevent, see comment two lines up.

janfaracik added 15 commits March 15, 2022 00:20

Add yarn deps

0ff896b

Add initial JS files

db1928d

WB

09e9109

Update hudson-behavior.js

491b1f1

Update tooltips.less

1fbcc55

WB

940d51a

Fix tooltip showing when it shouldn't, improve appearance

7e6c576

Now possible to reregister tooltips

df6847a

Update buildHealth.jelly

7e43dfa

Update header tooltips, add base tooltip styling

133c486

Add percentage symbol

7223890

Merge branch 'master' into tippy-1-tooltip

22f300a

Update prototype.js

9be65d6

Update tooltips.js

60e4232

Merge branch 'master' into tippy-1-tooltip

93632d3

janfaracik commented Mar 27, 2022

View reviewed changes

war/src/main/webapp/scripts/prototype.js Outdated Show resolved Hide resolved

NotMyFault reviewed Mar 27, 2022

View reviewed changes

janfaracik added 2 commits March 27, 2022 23:31

Fix new lines in tooltips, fix empty tooltips showing

bfce09a

Fix last build successful from having a title

f7659aa

timja requested a review from a team March 28, 2022 07:33

timja added web-ui The PR includes WebUI changes which may need special expertise rfe For changelog: Minor enhancement. use `major-rfe` for changes to be highlighted labels Mar 28, 2022

NotMyFault reviewed Mar 28, 2022

View reviewed changes

Fix new line in queue tooltip

d5608a1

timja reviewed Mar 28, 2022

View reviewed changes

core/src/main/resources/lib/hudson/queue.jelly Outdated Show resolved Hide resolved

timja requested review from NotMyFault and uhafner November 21, 2022 11:41

NotMyFault approved these changes Nov 21, 2022

View reviewed changes

comment-ops-bot bot added the ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback label Nov 22, 2022

uhafner reviewed Nov 22, 2022

View reviewed changes

timja removed the ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback label Nov 22, 2022

uhafner mentioned this pull request Nov 22, 2022

Use Jenkins tooltips for image button jenkinsci/font-awesome-api-plugin#186

Merged

uhafner approved these changes Nov 22, 2022

View reviewed changes

timja added the ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback label Nov 22, 2022

timja merged commit 221ff94 into jenkinsci:master Nov 25, 2022

timja deleted the tippy-1-tooltip branch November 25, 2022 22:23

NotMyFault added major-rfe For changelog: Major enhancement. Will be highlighted on the top and removed rfe For changelog: Minor enhancement. use `major-rfe` for changes to be highlighted labels Nov 26, 2022

janfaracik mentioned this pull request Dec 4, 2022

Update link dropdown menus to use new Tippy dropdowns #7474

Merged

14 tasks

basil mentioned this pull request Dec 5, 2022

Bump jenkins.version from 2.379 to 2.380 for bom-weekly jenkinsci/bom#1611

Closed

basil reviewed Jan 20, 2023

View reviewed changes

mawinter69 mentioned this pull request Feb 22, 2024

[JENKINS-71148] avoid empty tooltips #8975

Merged

daniel-beck reviewed Nov 21, 2024

View reviewed changes

timja mentioned this pull request Dec 10, 2024

[JENKINS-73539] Disable YUI by default #10045

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace YUI tooltips with Tippy.js #6408

Replace YUI tooltips with Tippy.js #6408

janfaracik commented Mar 27, 2022 •

edited by MarkEWaite

Loading

NotMyFault left a comment

janfaracik commented Mar 27, 2022

NotMyFault left a comment •

edited

Loading

daniel-beck commented Mar 28, 2022

daniel-beck commented Mar 28, 2022

timja commented Mar 28, 2022

timja commented Mar 28, 2022

timja commented Nov 22, 2022

uhafner left a comment •

edited

Loading

uhafner left a comment

stephan-senkbeil commented Nov 30, 2022

uhafner commented Nov 30, 2022

andrewkm commented Dec 4, 2022

NotMyFault commented Dec 4, 2022

MarkEWaite commented Dec 4, 2022

NotMyFault commented Dec 4, 2022 •

edited

Loading

basil commented Dec 5, 2022

basil commented Jan 20, 2023

basil Jan 20, 2023

daniel-beck commented Aug 23, 2023 •

edited

Loading

daniel-beck commented Feb 29, 2024

daniel-beck Nov 21, 2024 •

edited

Loading

Replace YUI tooltips with Tippy.js #6408

Replace YUI tooltips with Tippy.js #6408

Conversation

janfaracik commented Mar 27, 2022 • edited by MarkEWaite Loading

For plugin developers

Proposed changelog entries

Proposed upgrade guidelines

Submitter checklist

Desired reviewers

Maintainer checklist

NotMyFault left a comment

Choose a reason for hiding this comment

janfaracik commented Mar 27, 2022

NotMyFault left a comment • edited Loading

Choose a reason for hiding this comment

daniel-beck commented Mar 28, 2022

daniel-beck commented Mar 28, 2022

timja commented Mar 28, 2022

timja commented Mar 28, 2022

timja commented Nov 22, 2022

uhafner left a comment • edited Loading

Choose a reason for hiding this comment

uhafner left a comment

Choose a reason for hiding this comment

stephan-senkbeil commented Nov 30, 2022

uhafner commented Nov 30, 2022

andrewkm commented Dec 4, 2022

NotMyFault commented Dec 4, 2022

MarkEWaite commented Dec 4, 2022

NotMyFault commented Dec 4, 2022 • edited Loading

basil commented Dec 5, 2022

basil commented Jan 20, 2023

basil Jan 20, 2023

Choose a reason for hiding this comment

daniel-beck commented Aug 23, 2023 • edited Loading

daniel-beck commented Feb 29, 2024

daniel-beck Nov 21, 2024 • edited Loading

Choose a reason for hiding this comment

janfaracik commented Mar 27, 2022 •

edited by MarkEWaite

Loading

NotMyFault left a comment •

edited

Loading

uhafner left a comment •

edited

Loading

NotMyFault commented Dec 4, 2022 •

edited

Loading

daniel-beck commented Aug 23, 2023 •

edited

Loading

daniel-beck Nov 21, 2024 •

edited

Loading